<template>
	<view class="step-panel">
		<view class="tools" v-show="!switchVisible">
			<view>
				<wd-input v-model="searchKey" placeholder="工序名称" suffix-icon="search" @blur="searchProcess"></wd-input>
				<wd-button block :round="false" plain hairline style="margin:10rpx 0;"
					@click="switchVisible = !switchVisible">{{ switchVisible ? '工序' : '资源' }}
				</wd-button>
			</view>
			<view>
				<view class="dragArea list-group" id="dragAreaLeft" :list="stepList" :data="processList"
					:change:data="Sortable.getData" :change:list="Sortable.getList">
					<view v-for="(element, index) in processList" :key="index" class="item">
						{{ element.processName }}
					</view>
				</view>
			</view>
		</view>
		<view class="tools" v-show="switchVisible">
			<view>
				<wd-input v-model="resource_name" placeholder="资源名称" suffix-icon="search"
					@blur="getResource"></wd-input>
				<wd-button block :round="false" plain hairline style="margin:10rpx 0;"
					@click="switchVisible = !switchVisible">{{ switchVisible ? '工序' : '资源' }}
				</wd-button>
			</view>
			<view>
				<view class="dragArea list-group" id="dragAreaLeft1" :list="stepList" :data="resourceList"
					:change:data="Sortable.getResourceData" :change:list="Sortable.getList">
					<view v-for="(element, index) in resourceList" :key="index" class="item">
						{{ element.resourceName }}
					</view>
				</view>
			</view>

		</view>

		<!-- <movable-area :scale-area="true"
			:style="{ 'width': '98vw', 'height': '1100rpx', 'overflow': 'hidden', 'backgroundColor': '#edeff6' }">
			<movable-view direction="all" :inertia="true" out-of-bounds :scale-min="0.01" :scale-max="4" :scale="true"
				:scale-value="0.1" :style="{ 'width': 'auto ', 'height': 'auto' }"> -->
		<view class="pancel" ref="pancelRef">
			<view class="step-list" :class="!stepList.length ? 'no-data' : ''">
				<view class="dragArea" id="dragAreaRight">
					<view class="item" v-for="(element, index ) in stepList" :key="index"
						:class="[stepList.length === index + 1 && 'last', (element.processName === '报检' || element.processName === '终检') && 'center-ctrl']">

						<view class="l-table" v-if="element.processName == '中控'">
							<view class="table-container bordered">
								<table class="analysis-table ">
									<tbody>
										<tr>
											<th>分析手段</th>
											<th>检验指标</th>
										</tr>
										<tr align="center" v-for="(item, rowindex) in element.checkList"
											:key="rowindex">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<view class="select-wrap"
													v-if="!element.disabled && item.status != 4 && item.recallFlag != 1">
													<view class="input"
														@click="() => showAnalyDialog(rowindex, index, item.analysisId)">
														<text class="label">{{ item.analysisName || '请选择' }}</text>
														<text class="arrow cuIcon-right"></text>
													</view>
												</view>
												<view v-else>{{ item.analysisName }}</view>
												<!-- <wd-select-picker type="radio" :show-confirm="false"
															v-model="item.analysisId" value-key="analysisId"
															label-key="analysisName" :columns="analysisOptions"
															style="background-color: transparent;"
															@change="(e) => changeAnalysis(e, item)" filterable /> -->

												<view class="add-dosage">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addCheck(element.checkList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger
														v-if="item.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeCheck(element.checkList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="item.recallFlag == 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="changeCheck(element.checkList, item, rowindex)">
													</wd-button>
												</view>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-if="item.status != 4 && item.recallFlag != 1"
													v-model="item.itemName" clearable no-border
													style="background-color: transparent" use-suffix-slot
													placeholder="请选择或输入检测指标">
													<template #suffix>
														<wd-icon name="arrow-down" size="22px"
															@click="() => showItemNameList(item, index, rowindex)"></wd-icon>
													</template>
												</wd-input>
												<view v-else>{{ item.itemName }}</view>
												<!-- <wd-select-picker type="radio" :show-confirm="false" v-model="item.itemName"
													:columns="item.indexEntities" style="background-color: transparent;" /> -->
											</td>
										</tr>
									</tbody>
								</table>
							</view>
						</view>
						<view class="l-table" v-else>
							<view class="table-container"
								:class="element.putIntoFlag && element.dosageList && element.dosageList.length ? 'bordered' : ''">
								<table class="analysis-table" v-if="element.putIntoFlag">
									<tbody>
										<tr>
											<th style="width: 160rpx; min-width: 8.2rem;">名称</th>
											<th>规格</th>
											<th>用量</th>
											<th style="width: 160rpx; min-width: 4.2rem;">单位</th>
										</tr>
										<tr align="center" v-for="(row, rowIndex) in element.dosageList"
											:key="rowIndex">
											<td :class="row.status == 4 ? 'td__abandon' : ''">
												<view class="select-wrap"
													v-if="!element.disabled && row.status != 4 && !row.recallFlag">
													<view class="input"
														@click="() => showDialog(rowIndex, index, row.invName)">
														<text class="label">{{ row.invName || '请选择' }}</text>
														<text class="arrow cuIcon-right"></text>
													</view>
												</view>
												<text v-else>{{ row.invName }}</text>
												<view class="add-dosage" v-if="isRecord && element.putIntoFlag">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addDosage(element.dosageList, row, rowIndex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger
														v-if="row.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeDosage(element.dosageList, row, rowIndex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="row.recallFlag == 1 && row.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => row.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="row.recallFlag == 1 && row.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => row.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="row.recallFlag == 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="changeDosage(element.dosageList, row, rowIndex)">
													</wd-button>
												</view>
											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">{{ row.invStd }}
											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">
												<wd-input v-if="row.status != 4 && row.recallFlag != 1"
													v-model="row.dosage" clearable type="number" no-border
													style="background-color: transparent;" />
												<text v-else> {{ row.dosage }}</text>

											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">{{ row.unit }}
											</td>
										</tr>
									</tbody>
								</table>
							</view>

						</view>

						<view class="content-container">
							<wd-button v-if="element.processName !== '终检' && !element.undraggable" type="icon"
								icon="delete" class="remove-btn" @click="removeStep(element, index)">
							</wd-button>
							<view v-if="element.resourceId" :class="['resource-btn']">
								<wd-popover placement="right" v-model="element.show" :content="element.resourceName">
									<wd-button plain hairline :round="false" size="small">
										资源
									</wd-button>
								</wd-popover>
								<!-- <a-popover placement="rightTop" :getPopupContainer="popupContainer"
									overlayClassName="process-popover">
									<a-button primary :class="['resource-btn']" size="small" :style="{ fontSize: '12px' }"
										@click="element.resourceId = null; element.resourceName = null">
										资源
									</a-button>
									<template #content>
										<p>{{ element.resourceName }}</p>
									</template>
								</a-popover> -->
							</view>
							<view v-for="(prop, i) in element.inspectionList" :key="i" class="btn-box"
								:style="{ marginRight: i != 0 ? i * 20 + 'px' : '0', fontSize: '12px' }">
								<wd-popover v-model="prop.show" mode="menu" placement="right"
									:content="renderPopLIst(element, prop)"
									@menuclick="({ item }) => menuAction(item, element, i, prop)">
									<wd-button plain hairline :class="['add-btn', prop.id ? 'add-btn__color' : '']"
										size="small" shape="circle">
										检{{ i + 1 }}
									</wd-button>
								</wd-popover>
							</view>

							<!-- <wd-popover v-model="element.show" mode="menu" placement="top"
								:content="zjRenderPopLIst(element)"
								@menuclick="({ item }) => menuAction(item, element, i)"
								v-if="isRecord && element.processName === '终检'">
								<view :class="['content', element.bgId ? 'content__color' : '']">
									{{ element.processName }}
								</view>

							</wd-popover> -->
							<view class="content"
								:class="['drag-target', element.disabled || element.undraggable ? 'undraggable' : '']"
								@click.stop="openDrawer(element, index)">
								{{ element.processName }}
							</view>
							<view v-if="element.putIntoFlag || element.processName == '中控'" class="left-line">
							</view>
							<view v-if="element.paramList && element.paramList.length || element.processName == '中控'"
								class="right-line"></view>
							<view class="bottom-line">
								<view class="line"></view>
								<view class="arrow"></view>
							</view>
						</view>
						<view class=" r-table bordered" v-if="element.processName == '中控'">
							<view class="table-container">
								<table class="analysis-table"
									v-if="element.sampletimeList && element.sampletimeList.length">
									<tbody>
										<tr>
											<th>取样实际描述</th>
											<th>取样时机</th>
										</tr>
										<tr align="center" v-for="(item, rowindex) in element.sampletimeList"
											:key="index">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-model="item.sampleDesc" clearable no-border
													v-if="item.status != 4 && item.recallFlag != 1"
													style="background-color: transparent;" placeholder="请输入" />
												<view v-else>{{ item.sampleDesc }}</view>
												<view class="add-dosage">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addSample(element.sampletimeList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger
														v-if="item.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeSample(element.sampletimeList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="item.recallFlag == 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="changeSample(element.sampletimeList, item, rowindex)">
													</wd-button>
												</view>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-model="item.sampleTime" clearable no-border
													v-if="item.status != 4 && item.recallFlag != 1"
													style="background-color: transparent;" placeholder="请输入" />

												<view v-else>{{ item.sampleTime }}</view>
											</td>
										</tr>
									</tbody>
								</table>
							</view>
						</view>
						<view class="r-table" :class="element.paramList && element.paramList.length ? 'bordered' : ''"
							v-else @click="() => editModal1(element, index)">
							<view class="mb1" v-if="isRecord && element.paramList && element.paramList.length">
								<wd-button class="mr4" plain hairline size="small" disabled type="primary">开始
								</wd-button>
								<view style="flex:1;height:70rpx;line-height:70rpx;margin-left:20rpx;">
									<uni-datetime-picker type="datetime" return-type="string"
										v-model="element.startTime" placeholder="开始日期" disabled />
								</view>
								<view style="margin-left:20rpx">
									<wd-icon name="fullsreen" size="22px"></wd-icon>
								</view>

							</view>
							<view class="table-container">
								<table class="analysis-table" v-if="element.paramList && element.paramList.length">
									<tbody>
										<tr>
											<th style="width: 160rpx;">参数</th>
											<th style="width: 160rpx;">目标值</th>
											<th style="width: 160rpx;">实测值</th>
											<th style="width: 160rpx;">单位</th>
											<th style="width: 160rpx;"
												v-if="element.dosageList && element.dosageList.length">
												<view class="item-center">
													<text>用料名称</text>
												</view>
											</th>
											<th style="width: 200rpx;">操作时间</th>
										</tr>
										<tr align="center"
											v-for="(item, rowindex) in element.paramList?.filter(item => item.status != 4).slice(0, 5)"
											:key="index">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<text>{{ item.paramName }}</text>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"><text>{{
												item.schemeParamValue }}</text></td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												{{ item.paramValue }}
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<text>{{ item.paramUnit }}</text>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"
												v-if="element.dosageList && element.dosageList.length">
												{{ item.invName }}
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"> {{
												formatTime(item.operateTime) }}
											</td>
										</tr>
									</tbody>
								</table>
							</view>
							<view class="mb1 mt1" v-if="isRecord && element.paramList && element.paramList.length">
								<wd-button class="mr4" plain hairline size="small" disabled type="primary">结束
								</wd-button>
								<view style="flex:1;height:70rpx;line-height:70rpx;margin-left:20rpx;">
									<uni-datetime-picker type="datetime" return-type="string" v-model="element.endTime"
										placeholder="结束日期" disabled />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </movable-view>
		</movable-area> -->
		<ppopup-select :options="props.materialList" :value="dosageInvName" :show="showDosageDialog"
			:kv="{ label: 'invName', value: 'invName' }" @change="(e) => onSelectMaterial(e)"
			@hideModal="(e) => showDosageDialog = e" />

		<ppopup-select :options="analysisOptions" :value="analysisId" :show="showAnalysisDialog"
			:kv="{ label: 'analysisName', value: 'analysisId' }" @change="(e) => changeAnalysis(e)"
			@hideModal="(e) => showAnalysisDialog = e" />
		<wd-popup v-model="openDrawerVis" position="right" custom-style="width: 60%;" :z-index="100">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action" @tap="closeDrawer">取消</view>
					<view class="action text-blue mks" @tap="saveElementForm">确定</view>
				</view>
				<view class="filter_container">
					<view class="block">
						<view class="label">现象描述</view>
						<view class="row">
							<wd-textarea type="textarea" auto-height v-model="elementForm.description"
								placeholder="请输入现象描述" clearable style="width: 100%" no-border>
							</wd-textarea>
						</view>
					</view>
					<view class="block">
						<view class="label">附件</view>

						<view class="row">
							<view>
								<uploadFile @complete="uploadComplete"></uploadFile>
							</view>

							<view class="list-picture">
								<view class="list-item" v-for="(item, index) in fileList">
									<view class="list-item-thumbnail">
										<image :width="48" :height="48" :src="item.url" v-if="isImage(item.url)"
											mode="scaleToFill" @click="preview(item.url)" />
										<view v-else class="txt" @click="previewWeb(item.url)">{{ item.url.replace(/.*\./,
											'') }}</view>
									</view>
									<text class="list-item-name">附件{{ index + 1 }}</text>
								</view>
							</view>
							<!-- <wd-textarea type="textarea" auto-height v-model="elementForm.description" placeholder="请输入现象描述"
								clearable style="width: 100%" no-border>
							</wd-textarea> -->
						</view>
					</view>
				</view>
			</view>
		</wd-popup>
		<edit-table :show="showEditTable" :dataList="tableData" @hideModal="showEditTable = false"
			:elementDTO="elementDTOS" @confirm="setProcess"></edit-table>
		<wd-action-sheet v-model="showItemName" :actions="itemNamcolumns" @close="closeItemNam"
			@select="selectItemNam" />
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		watch,
		ref,
		computed,
		onMounted,
		nextTick
	} from 'vue';
	import { request } from '@/utils/request';
	import dayjs from 'dayjs';
	import {
		queryProcessList
	} from '@/service/pm-record';
	import {
		analysisList, ccFormInfoByExperimentRecord
	} from '@/service/pm-assay';
	import showModal from '@/utils/modal'
	import {
		useDict
	} from '@/hooks/dict';
	import EditTable from './editTable/index.vue';
	// import TimePicker from '@/components/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue';
	// import { time } from 'console';
	import PpopupSelect from './popupSelect/index.vue'
	// import dateTimePicker from "@/components/dateTimePicker.vue";
	// import GestureJs from '@/utils/gesture.ts'

	export default defineComponent({
		components: {
			EditTable,
			// TimePicker,
			PpopupSelect
		},
		props: {
			modelValue: {
				type: Array,
				default: () => []
			},
			materialList: {
				type: Array,
				default: () => []
			},
			mode: {
				type: String,
				default: 'scheme'
			}
		},
		emits: ['change', 'remove', 'update:modelValue', 'update:modelDisabled', 'createRecord', 'switchChange'],
		setup(props, { emit }) {
			const showEditTable = ref(false);
			const isScheme = computed(() => {
				return props.mode === 'scheme';
			});

			const isRecord = computed(() => {
				return props.mode === 'record';
			});
			const stepList = ref([]);
			const pancelRef = ref();
			const fileList = ref([])
			const processList = ref([{
				processName: '报检',
				putIntoFlag: false,
			}]);


			watch(
				() => props.modelValue,
				(val) => {
					stepList.value = [...val];
					// stepList.value.forEach(item => {
					// 	item.paramList && item.paramList.forEach((param) => {
					// 		if (param.operateTime) {
					// 			if (param.operateTime.split(' ')[1]) {
					// 				param.operateTime = param.operateTime.split(' ')[1]
					// 			}

					// 		}
					// 	})

					// })
				}, {
				immediate: true,
				deep: true,
			}
			);
			const {
				unit: unitList
			} = useDict('unit');

			const searchKey = ref('');
			const searchProcess = function (e) {
				console.log(e)
				getProcessList(e.value)
			}

			const getProcessList = function (processName = '') {
				queryProcessList({ processName, pageSize: 999 })
					.then((res) => {
						// res.data = res.data.records;
						console.log(res.data)
						if (res.data) {
							const list = res.data.filter(item => item.processName != '复配投料')
							list.forEach((item) => {
								if (item.putIntoFlag && !item.dosageList?.length) {
									item.dosageList = [{ invName: null, dosage: '', unit: null }];
								}

								item.paramList =
									item.baseParamInfos &&
									item.baseParamInfos.map((param) => {
										param.paramUnitList = param.paramUnitList.map(val => {
											return {
												name: val
											}
										})
										delete param.id;
										return param;
									});
								delete item.id;
								delete item.baseParamInfos;
							});
							processList.value = [
								{
									processName: '报检',
									putIntoFlag: false,
								},
								{
									processName: '中控',
									sampletimeList: [{
										sampleDesc: '',
										sampleTime: ''
									}],
									checkList: [{
										analysisId: '',
										analysisName: '',
										itemName: ''
									}]
								},
								// {
								//   processName: '终检',
								//   putIntoFlag: false,
								// },
								...list,
							];
						}
					})
			};

			const dropHandle = (ele, index) => {
				// 工序有id才允许托
				if (ele.element?.id) {
					const eleCopy = JSON.parse(JSON.stringify(ele));
					eleCopy.show = false
					delete eleCopy.id;
					stepList.value[index].inspectionList.push(eleCopy);
					emit('update:modelValue', stepList.value);
				} else {
					showModal({
						title: '提示',
						content: `当前实验记录还未生成，是否生成实验记录。`,
						cancelColor: '#333333',
						confirmColor: '#2d84fb',
						cancelText: '否',
						confirmText: '是',
						confirm: () => {
							console.log('取消')
						},
						cancel: () => {
							emit('createRecord')
						}
					})
				}
			};

			const removeInspection = (element, index) => {
				element.inspectionList.splice(index, 1);
				emit('update:modelValue', stepList.value);
			};

			const openDrawerVis = ref(false);
			const elementForm = ref({
				description: '',
			});
			const eleIndex = ref(null);

			const openDrawer = (ele, index) => {
				if (props.mode === 'scheme' || ['中控', '终检'].includes(ele.processName)) return;
				openDrawerVis.value = true;
				elementForm.value.description = ele.description;
				elementForm.value.attachment = ele.attachment
				eleIndex.value = index;
				console.log(ele.attachment)
				if (ele.attachment) {
					fileList.value = elementForm.value.attachment.split(',').map((item) => {
						return {
							url: item,
						};
					});
				} else {
					fileList.value = []
					console.log(fileList.value)
				}
			};

			const closeDrawer = () => {
				openDrawerVis.value = false;
				elementForm.value.description = ''
				fileList.value = []

			}
			const saveElementForm = () => {
				const list = fileList.value.map(item => item.url)
				stepList.value[eleIndex.value].description = elementForm.value.description;
				stepList.value[eleIndex.value].attachment = list.length && list.join(',') || "";

				closeDrawer()
				emit('update:modelValue', stepList.value);
			}



			const menuAction = (item, ele, i ?, prop ?) => {
				switch (item.content) {
					case '去报检':
						toInspection(ele)
						break;
					case '报检单':
						toInspectionView(prop, i)
						break;
					case '报检结果':
						toInspectionList(ele, i)
						break;
					case '删除':
						removeInspection(ele, i)
						break;
					default:
						break;
				}
			}

			const zjRenderPopLIst = (ele) => {
				const list = []

				if (ele.id && !ele.bgId) {
					list.push({
						content: '去报检',
					})
				}

				if (ele.bgId) {
					list.push({
						content: '报检结果',
					})
				}
				return list
			}

			const renderPopLIst = (ele, item) => {
				const list = []

				if (!item.checkId) {
					list.push({
						content: '去报检',
					})
				}
				if (item.checkId) {
					list.push({
						content: '报检单',
					})
				}
				if (item.id) {
					list.push({
						content: '报检结果',
					})
				}

				if (!item.checkId) {
					list.push({
						content: '删除',
					})
				}

				return list
			}

			/**
			 * 资源模块
			 */
			const switchVisible = ref(false)

			const getResourceing = ref(false)

			const resourceList = ref([])

			const resource_name = ref('')
			const getResource = async function () {
				getResourceing.value = true;
				try {
					const webSql = resource_name.value ? `resource_name like '%${resource_name.value}%'` : null

					const { data } = await request({
						url: '/pm/baseResource/page',
						method: 'GET',
						query: { webSql, size: 999, current: 1, descs: 'create_time' },
					});

					resourceList.value = data.records

				} catch (error) {
					console.log(error);
					// options.onError(error as any);
				}

				getResourceing.value = false;
			}

			const onSetSetpResource = (e) => {
				const m = e.addResource
				if (['中控', '终检'].includes(m.element.processName)) return;
				stepList.value[m.newIndex].resourceId = m.resourceObj.id;
				stepList.value[m.newIndex].resourceName = m.resourceObj.resourceName
			}



			const processIndex = ref(null);
			const tableData = ref([])
			const elementDTOS = ref({})
			const editModal1 = (ele, index) => {
				emit('switchChange')
				// processIndex.value = index
				// showEditTable.value = true
				// elementDTOS.value = JSON.parse(JSON.stringify(ele))
				// tableData.value = JSON.parse(JSON.stringify(ele.paramList));
				// tableData.value.forEach(item => {
				// 	item.processName = ele.processName
				// })
				// tableData.value.unshift({
				// 	recallFlag: ele.recallFlag,
				// 	processName: ele.processName,
				// 	paramValue: '-',
				// 	title: '开始：',
				// 	operateTime: ele.startTime,
				// })
				// tableData.value.push({
				// 	recallFlag: ele.recallFlag,
				// 	processName: ele.processName,
				// 	paramValue: '-',
				// 	title: '结束：',
				// 	operateTime: ele.endTime,
				// })
			}

			const setProcess = (data) => {
				stepList.value[processIndex.value].startTime = data[0].operateTime
				let day = '';
				if (data[0].operateTime) {
					day = dayjs().format('YYYY-MM-DD ')
				} else {
					day = dayjs().format('YYYY-MM-DD ')
				}

				stepList.value[processIndex.value].paramList = data.slice(1, data.length - 1)

				stepList.value[processIndex.value].endTime = data[data.length - 1].operateTime
			}
			const toInspectionList = function (element, index) {
				const type = element.processName === '终检' ? 1 : 0;
				const path = `/pages/pm/assay-report/form?id=${element.inspectionList[index].id}&type=${type}&t=qcMiddleReport`

				uni.navigateTo({
					url: path,
				});
			};

			const toInspectionView = function (element) {
				const path = `/pages/pm/assay-form/form?id=${element.checkId}&checkCode=${element.checkCode}&t=qcMiddleCheck`;
				uni.navigateTo({
					url: path,
				});
			}

			const toInspection = function (element) {
				// const query = element.processName === '终检' ? {
				// 	pid: element.id,
				// 	type: 1
				// } : {
				// 	id: element.id,
				// 	type: 0
				// };

				if (!element.id) {
					showModal({
						title: '提示',
						content: `当前实验记录还未生成，是否生成实验记录。`,
						cancelColor: '#333333',
						confirmColor: '#2d84fb',
						cancelText: '否',
						confirmText: '是',
						confirm: () => {
							console.log('取消')
						},
						cancel: () => {
							emit('createRecord')
						}
					})
					return
				}

				const type = element.processName === '终检' ? 1 : 0;
				const path = `/pages/pm/assay-form/form?id=${element.id}&type=${type}`

				if (element.processName === '终检') {
					ccFormInfoByExperimentRecord(element.id, 1)
						.then((res) => {
							if (res.data) {
								uni.navigateTo({ url: path });
							} else {
								uni.showToast({
									mask: true,
									title: res.msg,
									icon: 'none',
								});
							}

						})
						.catch((err) => {
							uni.showToast({
								mask: true,
								title: err.msg,
								icon: 'none',
							});
						});
				} else {
					uni.navigateTo({ url: path });
				}
			};

			const setStartTime = function (element) {
				if (!element.startTime) {
					element.startTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
				}
			};

			const setEndTime = function (element) {
				if (!element.startTime) {
					uni.showToast({
						mask: true,
						title: `开始后才能结束`,
						icon: 'none',
					});
					return;
				}
				if (dayjs(element.startTime).millisecond() > dayjs(element.endTime).millisecond()) {
					uni.showToast({
						mask: true,
						title: `结束日期不能小于开始日期`,
						icon: 'none',
					});
					return;
				}
				if (!element.endTime) {
					element.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
				}
			};

			const changeEndTime = (e, element) => {
				if (!element.startTime) {
					uni.showToast({
						mask: true,
						title: `开始日期不能为空`,
						icon: 'none',
					});
					nextTick(() => {
						element.endTime = ''
					})
					return
				}
				if (dayjs(element.startTime).millisecond() > dayjs(e).millisecond()) {
					uni.showToast({
						mask: true,
						title: `结束日期不能小于开始日期`,
						icon: 'none',
					});

					nextTick(() => {
						element.endTime = ''
					})
					return;
				}

			}
			const findZJIndex = () => {
				const index = stepList.value.findIndex(item => item.processName === '终检')
				return index
			}

			const uploadComplete = (ref) => {
				const { url } = ref;
				fileList.value.push({
					url: url,
				});

			}
			const onStepChange = function (e) {

				const m = e.added || e.moved;
				if (m.processName === '报检') {
					return dropHandle(m, m.newIndex)
				}
				stepList.value.splice(m.newIndex, 0, m.element)

				const zjIndex = findZJIndex();
				if (zjIndex !== stepList.value.length - 1 && e.added && zjIndex > -1) {
					stepList.value.splice(zjIndex + 1, stepList.value.length - zjIndex - 1)
				}

				emit('change', stepList.value);
				emit('update:modelValue', stepList.value);

				if (m.newIndex === stepList.value.length - 1) {
					if (pancelRef.value) {
						pancelRef.value.scrollTo({
							top: pancelRef.value.scrollHeight,
							behavior: 'smooth',
						});
						// stepListRef.value.scrollTop = stepListRef.value.scrollHeight;
						// stepListRef.value.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
					}
				}

			};


			const removeStep = function (element, index : number) {
				emit('remove', element, index);
				console.log(index);
				stepList.value.splice(index, 1);
				emit('update:modelValue', stepList.value);
			};



			const addDosage = function (dosageList, row, rowIndex) {
				const newRow = {
					invName: '',
					dosage: '',
					unit: null
				};
				dosageList.splice(rowIndex + 1, 0, newRow);
			};
			const removeDosage = function (dosageList, row, rowIndex) {
				if (dosageList.length <= 1) {
					uni.showToast({
						mask: true,
						title: `请至少保留一个用料！`,
						icon: 'none',
					});
					return;
				}
				dosageList.splice(rowIndex, 1);
			};

			const changeDosage = function (dosageList, row, rowIndex) {
				row.status = 4;
				addDosage(dosageList, row, rowIndex)
			}

			const addParam = function (paramList, row, rowIndex) {
				const newRow = {
					frequencyFlag: row.frequencyFlag,
					paramName: row.paramName,
					paramUnit: row.paramUnit,
					schemeId: row.schemeId,
					valueType: row.valueType,
					paramValue: '',
					operateTime: dayjs().format('HH:mm:ss'),
				};
				paramList.splice(rowIndex + 1, 0, newRow);
			};
			const removeParam = function (paramList, row, rowIndex) {
				const currentTypeList = paramList.filter((item) => item.paramName === row.paramName);
				if (currentTypeList.length <= 1) {
					uni.showToast({
						mask: true,
						title: `请至少保留一个${row.paramName} 参数`,
						icon: 'none',
					});
					return;
				}
				paramList.splice(rowIndex, 1);
			};

			const addCheck = function (checkList, row, rowIndex) {
				const newRow = { invName: null, dosage: '', unit: null };
				checkList.splice(rowIndex + 1, 0, newRow);
			};
			const removeCheck = function (checkList, row, rowIndex) {
				if (checkList.length <= 1) {
					uni.showToast({
						mask: true,
						title: `请至少保留一个分析手段`,
						icon: 'none',
					});
					return;
				}
				checkList.splice(rowIndex, 1);
			};

			const abandonCheck = function (row) {
				row.status = 4
			}

			const changeCheck = function (checkList, row, rowIndex) {
				abandonCheck(row)
				addCheck(checkList, row, rowIndex)
			}


			const addSample = function (paramList, row, rowIndex) {
				const newRow = {
					sampleDesc: row.sampleDesc,
					sampleTime: row.sampleTime,
				};
				paramList.splice(rowIndex + 1, 0, newRow);
			};
			const removeSample = function (paramList, row, rowIndex) {
				if (paramList.length <= 1) {
					uni.showToast({
						mask: true,
						title: `请至少保留一个`,
						icon: 'none',
					});
					return;
				}
				paramList.splice(rowIndex, 1);
			};

			const changeSample = function (paramList, row, rowIndex) {
				row.status = 4;
				addSample(paramList, row, rowIndex)
			}


			const formatTime = function (time) {
				if (!time) return ''
				return dayjs(time).format('MM-DD HH:mm:ss');
			};

			const preview = (url) => {
				if (!url) return;
				uni.previewImage({
					urls: [url],
				});
			};

			const previewWeb = (url) => {
				uni.navigateTo({
					url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
				});
			};

			const isImage = (url : string) => {
				if (!url) return '';
				const suffix = url.replace(/.*\./, '');
				return ['jpg', 'jpeg', 'png', 'gif', 'svg', 'JPG', 'JPEG', 'PNG', 'GIF', 'SVG', 'WebP'].includes(
					suffix,
				);
			};


			const analysisOptions = ref([]);
			const getAnalysisList = async () => {
				// 获取分析手段
				await analysisList({ size: 20000 }).then((res) => {
					analysisOptions.value = res.data.records.map((item) => {
						const { analysisName, id, equipmentList, analysisIndexUnit, analysisIndexList } = item;
						return { analysisName, analysisId: id, equipmentList, analysisIndexUnit, analysisIndexList };
					});
				});
			}
			//选择物料
			const proIndex = ref(null);
			const proRowIndex = ref(null)
			const showDosageDialog = ref(false)
			const dosageInvName = ref('')
			const showDialog = (rowIndex, index, invName) => {
				dosageInvName.value = invName
				proIndex.value = index
				proRowIndex.value = rowIndex
				showDosageDialog.value = true
			}

			const onSelectMaterial = (e) => {
				if (!e) return;
				stepList.value[proIndex.value].dosageList[proRowIndex.value].unit = e.unit
				stepList.value[proIndex.value].dosageList[proRowIndex.value].invName = e.invName
				stepList.value[proIndex.value].dosageList[proRowIndex.value].invStd = e.invStd
				emit('update:modelValue', stepList.value);
			};

			// 选择分析手段
			const analysisId = ref('')
			const showAnalysisDialog = ref(false)
			const showAnalyDialog = (rowIndex, index, id) => {
				analysisId.value = id
				proIndex.value = index
				proRowIndex.value = rowIndex
				showAnalysisDialog.value = true
			}

			const changeAnalysis = (e, record) => {
				stepList.value[proIndex.value].checkList[proRowIndex.value].itemName = ''
				stepList.value[proIndex.value].checkList[proRowIndex.value].indexEntities = e.analysisIndexList || []
				stepList.value[proIndex.value].checkList[proRowIndex.value].analysisName = e.analysisName;
				stepList.value[proIndex.value].checkList[proRowIndex.value].analysisId = e.analysisId
				emit('update:modelValue', stepList.value);
			};

			// 选择指标
			const showItemName = ref(false);
			const checkItemNam = ref(null);
			const checkItemNamRow = ref(null);
			const itemNamcolumns = ref([]);
			const showItemNameList = (item, index, rowIndex) => {
				checkItemNam.value = null;
				if (!item.analysisId) {
					uni.showToast({
						title: '请先选择检测项目（分析手段）',
						icon: 'none',
						mask: true,
					});
					return;
				}
				const o = analysisOptions.value.find((a) => a.value === item.analysisId);
				itemNamcolumns.value = o && o['analysisIndexList'].map((item) => {
					return {
						name: item,
					};
				});
				checkItemNam.value = index;
				checkItemNamRow.value = rowIndex;
				showItemName.value = true;
			};

			const closeItemNam = () => {
				showItemName.value = false;
			};
			const selectItemNam = (e) => {
				const value = e.item.name;
				stepList.value[checkItemNam.value][checkItemNamRow.value]['itemName'] = value;
				checkItemNam.value = null;
				checkItemNamRow.value = null;
			};

			const listenerScroll = (params) => {
				emit('update:modelDisabled', params.disabled);
			}


			const init = function () {
				getProcessList();
				getAnalysisList();
				getResource()

			};
			init()
			return {
				emit,
				props,
				tableData,
				showEditTable,
				pancelRef,
				dosageInvName,
				unitList,
				isScheme,
				isRecord,
				processList,
				elementForm,
				searchKey,
				stepList,
				fileList,
				elementDTOS,
				switchVisible,
				resourceList,
				resource_name,
				getResource,
				dropHandle,
				setProcess,
				preview,
				removeInspection,
				menuAction,
				renderPopLIst,
				zjRenderPopLIst,
				toInspectionList,
				toInspection,
				setStartTime,
				setEndTime,
				onStepChange,
				removeStep,
				onSelectMaterial,
				addDosage,
				removeDosage,
				addParam,
				removeParam,
				formatTime,
				getProcessList,
				changeEndTime,
				addSample,
				removeSample,
				addCheck,
				removeCheck,
				changeAnalysis,
				isImage,
				previewWeb,
				saveElementForm,
				uploadComplete,
				analysisOptions,
				selectItemNam,
				showItemName,
				showItemNameList,
				closeItemNam,
				itemNamcolumns,
				openDrawerVis,
				openDrawer,
				editModal1,
				closeDrawer,
				showDialog,
				showDosageDialog,
				analysisId,
				showAnalyDialog,
				showAnalysisDialog,
				changeCheck,
				changeDosage,
				changeSample,
				searchProcess,
				listenerScroll,
				onSetSetpResource,
			}
		}
	})
</script>

<script module="Sortable" lang="renderjs">
	import Sortable from "sortablejs";
	export default {
		name: 'Sortable',
		data() {
			return {
				relatedProcessName: '',
				resourceList: [],
				processList: [],
				stepList: [],
				flag: true,
				sortable: null,
				sortable1: null,
				sortable2: null,
				disabledScroll: false
			}
		},
		mounted() {
			const dragAreaLeft = document.getElementById('dragAreaLeft');
			const dragAreaLeft1 = document.getElementById('dragAreaLeft1');
			const dragAreaRight = document.getElementById('dragAreaRight');
			this.sortable = new Sortable(dragAreaLeft, {
				sort: false, //是否可进行拖拽排序
				animation: 200,
				ghostClass: 'dragArea',
				group: {
					name: 'step',
					pull: 'clone', // To clone: set pull to 'clone'
				},
				scroll: false,
				handle: ".item",
				direction: 'horizontal',
				delay: 100,
				onStart: () => {
					this.disabledScroll = true
					this.emitListenerScroll(this.$ownerInstance)
				},
				onMove: (evt) => {
					const element = evt.related.children[1].getElementsByClassName('drag-target')
					this.relatedProcessName = element[0].innerText
					if (evt.dragged.innerText == '报检') return false
				},
				onEnd: (e) => {
					this.disabledScroll = false
					this.emitListenerScroll(this.$ownerInstance)
					this.endBj(e, this.$ownerInstance);
				}
			})

			this.sortable2 = new Sortable(dragAreaLeft1, {
				sort: false, //是否可进行拖拽排序
				animation: 200,
				ghostClass: 'dragArea',
				group: {
					name: 'step',
					pull: 'clone', // To clone: set pull to 'clone'
				},
				scroll: false,
				handle: ".item",
				direction: 'horizontal',
				delay: 100,
				onStart: () => {
					this.disabledScroll = true
					this.emitListenerScroll(this.$ownerInstance)
				},
				onMove: (evt) => {
					const element = evt.related.children[1].getElementsByClassName('drag-target')
					this.relatedProcessName = element[0].innerText
					return false
				},
				onEnd: (e) => {
					this.disabledScroll = false
					this.emitListenerScroll(this.$ownerInstance)
					this.endResource(e, this.$ownerInstance);
				}
			})

			this.sortable1 = new Sortable(dragAreaRight, {
				sort: false, //是否可进行拖拽排序
				animation: 260,
				// scroll: true,
				direction: 'horizontal',
				scroll: true,
				handle: ".drag-target",
				group: {
					name: 'step',
					put: (e) => {
						return this.$ownerInstance.flag
					}
				},
				filter: '.undraggable',
				delay: 100,
				onAdd: (e) => {
					this.disabledScroll = false
					this.emitStepChange(e, this.$ownerInstance);

					this.emitListenerScroll(this.$ownerInstance)
				},
				// onChange: (e) => {
				// 	console.log(e)
				// 	// this.emitStepChange(e, this.$ownerInstance);
				// },

			})
		},
		methods: {
			getResourceData(value) {
				if (value) {
					this.resourceList = value
				}
			},
			getData(value) {
				if (value) {
					this.processList = value
				}

			},
			getList(value) {
				if (value) {
					this.stepList = value
				}

			},
			findStepIndex(name) {
				if (!name) return
				const step = this.stepList.findIndex(item => item.processName == name)
				return step > -1 ? step : null
			},
			findStep(name) {
				if (!name) return
				const step = this.stepList.find(item => item.processName == name)
				return step ? step : null
			},

			findStepIndewx(name) {
				if (!name) return
				const step = this.stepList.findIndex(item => item.processName == name)
				return step > -1 ? step : null
			},
			findProcess(processName) {
				const process = this.processList.find(item => item.processName == processName);
				return process ? process : {}
			},
			findResource(processName) {
				const process = this.resourceList.find(item => item.resourceName == processName);
				return process ? process : {}
			},
			endBj(e, instance) {
				let obj;
				obj = this.findProcess(e.item.innerText)
				if (e.item.innerText == '报检') {
					e.newIndex = this.findStepIndex(this.relatedProcessName)
					obj = this.findStep(this.relatedProcessName)
					instance.callMethod('onStepChange', {
						added: {
							processName: e.item.innerText,
							newIndex: e.newIndex,
							isTrusted: e.isTrusted,
							oldIndex: e.oldIndex,
							element: obj,
						}
					});
				}

			},

			endResource(e, instance) {
				let resourceObj = this.findResource(e.item.innerText)
				e.newIndex = this.findStepIndex(this.relatedProcessName)
				let obj = this.findStep(this.relatedProcessName)
				instance.callMethod('onSetSetpResource', {
					addResource: {
						processName: e.item.innerText,
						newIndex: e.newIndex,
						isTrusted: e.isTrusted,
						oldIndex: e.oldIndex,
						element: obj,
						resourceObj,
					}
				});
			},

			emitListenerScroll(instance) {
				instance.callMethod('listenerScroll', {
					disabled: this.disabledScroll
				})
			},

			emitStepChange(e, instance) {
				let obj;
				obj = this.findProcess(e.item.innerText)
				e.item.classList.add('drag-item');

				instance.callMethod('onStepChange', {
					added: {
						processName: e.item.innerText,
						newIndex: e.newIndex,
						isTrusted: e.isTrusted,
						oldIndex: e.oldIndex,
						element: obj,
					}
				});

				this.$nextTick(() => {
					this.removeStepDom();
				})
			},
			removeStepDom() {
				const nodeToRemove = document.getElementsByClassName('drag-item')[0];
				const parentNode = nodeToRemove && nodeToRemove.parentNode;
				parentNode && parentNode.removeChild(nodeToRemove);
			}

		}

	}
</script>

<style lang="scss" scoped>
	@import "./table.scss";
	$background: #edeff6;
	$nodeWidth: 80px;
	$nodeHeight: 45px;
	$tableMargin: 50px;
	$borderColor: #5f95ff;
	$spacing: 20px;

	.tools {
		width: 240rpx;
		padding-right: 24rpx;


		.list-group {
			display: flex;
			flex-wrap: wrap;
			// justify-content: center;
			align-content: flex-start;
			height: calc(1100rpx - 90rpx);
			overflow: auto;
			padding-top: 20rpx;
			padding-left: 10rpx;
		}

		.item {
			display: inline-block;
			padding: 6px 12px;
			margin: 4px 0;
			width: 120rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border: 1px solid $borderColor;
			border-radius: 4px;
			background: #eff4ff;
			color: #333333;
			cursor: context-menu;
			font-size: 0.8rem;
			white-space: nowrap;
			text-overflow: ellipsis;

			&.center-ctrl {
				// width: $nodeHeight;
				// padding: 8px;
				border-radius: calc($nodeHeight/2);
			}
		}
	}

	.step-panel {
		display: flex;
		height: fit-content;
		height: 1100rpx;

	}

	.pancel {
		flex: 1;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background-color: #edeff6;
		// height: 100%;
		// max-height: 70vh;
		// max-height: 1200rpx;
		overflow: auto;
		position: relative;
		max-width: calc(98vw - 240rpx);

		.step-list {
			padding-top: 30px;
			// min-height: 600px;
			// width: 100%;
			// width: $nodeWidth;
			// padding-left: 200px;

			// transform: translateX(120px);
			&.no-data {
				width: calc(100%);
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.dragArea {
				// // width: 100%;
				// padding-top: 30px;
				// padding-bottom: 200px;
				box-sizing: content-box;
				display: inline-block;
			}

			// cursor: grabbing;
			.item {
				position: relative;
				min-height: 100px;
				display: flex;
				// justify-content: center;
				// align-items: flex-start;
				padding-bottom: $spacing;

				&.sortable-ghost {
					opacity: 0;
				}

				&.center-ctrl {
					// margin-top: -30px;
					min-height: 90px;

					.content {
						// width: $nodeHeight;
						// border-radius: 50%;
						border-radius: calc($nodeHeight/2);

						&__color {
							color: #52c41a;
							border-color: #52c41a
						}
					}
				}

				.content-container {
					position: relative;

					// top: 30px;
					.remove-btn,
					.btn-box {
						position: absolute;
						top: -10px;
						right: -10px;
						opacity: 1;
						transition: 0.26s;
						z-index: 10;
					}

					.btn-box {
						top: 60rpx;
						right: -20rpx;
					}

					.resource-btn {
						position: absolute;
						top: -20rpx;
						left: -40rpx;
						z-index: 1;
						opacity: 1;
					}

					.add-btn {
						width: 56rpx;
						border-radius: 50%;

						&__color {
							color: #52c41a;
							border-color: #52c41a
						}
					}

				}

				.content {
					padding: 12px;
					// width: 100%;
					// height: 100%;
					width: $nodeWidth;
					// height: $nodeHeight;
					// line-height: calc($nodeHeight - 24px);
					text-align: center;
					display: inline-block;
					border: 1px solid $borderColor;
					border-radius: 4px;
					background: #eff4ff;
					color: #333333;
					cursor: move;

					&.undraggable {
						cursor: default;
					}
				}

				.l-table {
					width: 390px;
					min-height: calc($nodeHeight + 30px);
					margin-right: $tableMargin;
					// position: absolute;
					// top: -30px;
					// left: calc(-280px - $tableMargin);
					display: inline-block;
					align-self: flex-start;
					position: relative;
					top: -30px;

					.table-container {
						&.bordered {
							padding: 8px;
							border: 1px solid $borderColor;
							border-radius: 4px;
							background-color: #fff;
						}

						.add-dosage {
							position: absolute;
							right: -16rpx;
							top: -40rpx;
						}
					}
				}

				.r-table {
					width: 1300rpx;
					margin-left: $tableMargin;
					position: relative;
					// top: -30px;
					display: inline-block;
					align-self: flex-start;
					position: relative;
					top: -30px;

					.table-container {
						overflow: inherit;
					}

					&.bordered {
						padding: 8px;
						border: 1px solid $borderColor;
						border-radius: 4px;
						background-color: #fff;
					}

					:deep() {
						.mb1 {
							display: flex;
							align-items: center;
							// margin-bottom: 0;

							.mr4 {
								margin-right: 0
							}

							.wd-picker {
								flex: 1;
							}
						}

						.mt1 {
							margin-top: 10rpx;
						}
					}

					.add-dosage {
						position: absolute;
						right: -16rpx;
						top: -40rpx;
					}

					// .add-param {
					//   position: absolute;
					//   right: -6px;
					//   top: -4px;

					//   .ant-btn {
					//     padding: 0 3px;
					//   }
					// }
				}

				.left-line {
					height: 1px;
					position: absolute;
					top: calc($nodeHeight/2 - 5px);
					background-color: $borderColor;
					width: calc($tableMargin + 3px);
					transform: rotate(20deg);
					right: calc($nodeWidth + 24px);
				}

				.right-line {
					height: 1px;
					position: absolute;
					top: calc($nodeHeight/2 - 5px);
					background-color: $borderColor;
					width: calc($tableMargin + 3px);
					transform: rotate(-20deg);
					left: calc($nodeWidth + 24px);
				}

				.bottom-line {
					width: 5px;
					position: absolute;
					top: $nodeHeight;
					bottom: 0 - $spacing;
					left: 0;
					right: 0;
					margin: auto;

					.line {
						height: calc(100% - 11px);
						width: 1px;
						margin: auto;
						background-color: $borderColor;
					}

					.arrow {
						width: 0;
						height: 0;
						margin-left: -2px;
						border-top: 11px solid $borderColor;
						border-right: 5px solid transparent;
						border-bottom: 5px solid transparent;
						border-left: 5px solid transparent;
					}
				}

				&:last-of-type {
					min-height: $nodeHeight;

					.bottom-line {
						display: none;
					}
				}

				// &.last {
				//   min-height: $nodeHeight;
				//   .bottom-line {
				//     display: none;
				//   }
				// }
			}

			.ctrl-container {
				// padding-right: 20px;
				// position: absolute;
				top: 30px;
				position: relative;

				&.hasData {
					&::after {
						content: '';
						position: absolute;
						width: 1px;
						right: 0;
						top: calc($nodeHeight/2);
						bottom: calc($nodeHeight/2 + 20px);
						background-color: $borderColor;
					}

					&::before {
						content: '';
						position: absolute;
						height: 1px;
						// right: 0;
						left: 280px;
						// left: 0;
						right: -90px;
						top: calc(50% - 10px);
						background-color: $borderColor;
					}
				}

				.ctrlCenterDragArea {
					// padding: 30px 0;
					padding-left: 130px;
					padding-bottom: 20px;
					min-height: calc($nodeHeight);
				}

				.item {
					min-height: auto;
					padding-bottom: 0;
				}

				.center-ctrl {
					// min-height: 90px;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						height: 1px;
						right: 0;
						top: calc($nodeHeight/2);
						left: $nodeWidth + 5px;
						background-color: $borderColor;
					}

					&::before {
						content: '';
						width: 0;
						height: 0;
						margin-left: -2px;
						border-top: 5px solid transparent;
						border-right: 11px solid #5f95ff;
						border-bottom: 5px solid transparent;
						border-left: 5px solid transparent;
						position: absolute;
						right: 0;
						top: calc($nodeHeight/2 - 4px);
						left: $nodeWidth;
					}

					.content {
						border-radius: calc($nodeHeight/2);
					}

					&~.center-ctrl {
						margin-top: 12px;
					}
				}

				.content {
					padding: 12px;
					// width: 100%;
					// height: 100%;
					width: $nodeWidth;
					height: $nodeHeight;
					line-height: calc($nodeHeight - 24px);
					text-align: center;
					display: inline-block;
					border: 1px solid $borderColor;
					border-radius: 4px;
					background: #eff4ff;
					color: #333333;
					// cursor: move;
					cursor: default;
					// &.undraggable {
					//   cursor: default;
					// }
				}
			}
		}

		:deep(.process-popover) {
			.ant-popover-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.select-wrap {
			flex: 1;

			.placeholder {
				color: #bfbfbf;
				font-size: 30rpx;
			}

			.input {
				display: flex;
				padding-left: 20rpx;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;

				.label {
					height: 100%;
					flex: 1;
					white-space: no-wrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&.border {
					border: 1px solid #dcdfe6;
				}
			}

			.arrow {
				font-size: 28rpx;
				color: #dcdfe6;
				font-size: 30rpx;
				width: 60rpx;
				text-align: center;
			}

		}
	}

	.list-picture {
		.list-item {
			position: relative;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			float: left;
			width: 200px;
			height: 66px;
			padding: 8px;
			margin-right: 8px;
			border: 1px solid #d9d9d9;
			border-radius: 8px;

			.list-item-thumbnail {
				flex: none;
				width: 48px;
				height: 48px;
				overflow: hidden;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;

				span {
					display: inline-block;
					width: 48px;
					height: 100%;
					line-height: 48px;

					&.txt {
						background-image: url('../../../../static/txtM.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.list-item-name {
				flex: auto;
				padding: 0 8px;
				overflow: hidden;
				line-height: 1.5714285714285714;
				text-overflow: ellipsis;
				white-space: nowrap;
				transition: all 0.3s;
			}
		}
	}



	.cu-dialog {
		font-size: 28rpx;

		.cu-bar {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 208rpx;
			padding: 0 30rpx;
		}

		.cu-bar .search-form {
			display: flex;
			flex: 1;
			align-items: center;
			height: 128rpx;
			margin: 0 30rpx;
			overflow: hidden;
			/* padding: 0 40rpx; */
			font-size: 24rpx;
			line-height: 128rpx;
			color: #333;
			background-color: white;
		}

		.search-container .filter-icon {
			padding: 0 18rpx;
			margin: 0;
			font-size: 40rpx;
			color: #007aff;
			border-left: 1rpx solid #f3f3f3;
		}

		.cu-dialog>.cu-bar:first-child .action {
			margin-right: 20rpx;
		}

		.filter_container {
			padding: 32rpx;
			padding-bottom: 64rpx;
			text-align: left;
			background-color: #fff;

			.block {
				~.block {
					margin-top: 32rpx;
				}

				.label {
					margin-bottom: 20rpx;
					font-weight: bold;
				}
			}

			.row {
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				// justify-content: space-between;

				input {
					flex: 1;
					height: 33rpx;
					padding: 16rpx 12rpx;
					font-size: 26rpx !important;
					background-color: #f7f7f7;
					border: 1rpx solid #f7f7f7;
					border-radius: 8rpx;

					.input-placeholder {
						color: #8a929f;
					}
				}

				.btn {
					flex: 1;
					padding: 16rpx;
					color: #999;
					text-align: center;
					background-color: #f7f7f7;
					border: 1rpx solid #dedede;
					border-radius: 8rpx;

					~.btn {
						margin-left: 24rpx;
					}

					&.primary {
						color: #fff;
						background-color: #007aff;
						border-color: #007aff;
					}
				}
			}
		}
	}

	.td__abandon {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 0;
			border-bottom: 1px solid #f56c6c;
			z-index: 1;
		}
	}
</style>